<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 无车辆状态 -->
			<view v-if="vehicleList.length === 0" class="empty-state">
				<view class="empty-illustration">
					<view class="car-illustration">
						<view class="car-body"></view>
						<view class="car-window"></view>
						<view class="car-wheel wheel-left"></view>
						<view class="car-wheel wheel-right"></view>
					</view>
					<view class="city-background">
						<view class="building building-1"></view>
						<view class="building building-2"></view>
						<view class="building building-3"></view>
					</view>
					<view class="nature-elements">
						<view class="leaf leaf-1"></view>
						<view class="leaf leaf-2"></view>
						<view class="leaf leaf-3"></view>
					</view>
				</view>
				<text class="empty-text">暂无车辆信息</text>
			</view>
			
			<!-- 有车辆状态 -->
			<view v-else class="vehicle-list">
				<view 
					v-for="(vehicle, index) in vehicleList" 
					:key="index" 
					class="vehicle-card"
				>
					<view class="vehicle-info">
						<view class="vehicle-image">
							<image :src="vehicle.image" mode="aspectFill" class="car-img"></image>
						</view>
						<view class="vehicle-details">
							<text class="vehicle-model">车型: {{ vehicle.model }}</text>
							<text class="vehicle-plate">车牌: {{ vehicle.plate }}</text>
						</view>
					</view>
					<view class="vehicle-actions">
						<view class="default-setting" @click="setDefault(index)">
							<view class="checkbox" :class="{ 'checked': vehicle.isDefault }">
								<text v-if="vehicle.isDefault" class="checkmark">✓</text>
							</view>
							<text class="default-text">设为默认车辆</text>
						</view>
						<text class="delete-btn" @click="deleteVehicle(index)">删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部添加按钮 -->
		<view class="add-button" @click="addVehicle">
			<text class="add-icon">+</text>
			<text class="add-text">添加车辆</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vehicleList: [
					// 示例数据，实际使用时可以设置为空数组来显示空状态
					{
						id: 1,
						model: '奔驰大G',
						plate: '豫M35468',
						image: '/static/vehicle_repair/mycar/bcBigG.webp',
						isDefault: true
					},
					{
						id: 2,
						model: '奔驰-GTR',
						plate: '豫M35422',
						image: '/static/vehicle_repair/mycar/bcGTR.jpeg',
						isDefault: false
					}
				]
			}
		},
		methods: {
			addVehicle() {
				uni.navigateTo({
					url: '/pages/my/mycardetails/mycardetails'
				});
			},
			setDefault(index) {
				// 将所有车辆设为非默认
				this.vehicleList.forEach(vehicle => {
					vehicle.isDefault = false;
				});
				// 设置当前车辆为默认
				this.vehicleList[index].isDefault = true;
				uni.showToast({
					title: '已设为默认车辆',
					icon: 'success'
				});
			},
			deleteVehicle(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这辆车吗？',
					success: (res) => {
						if (res.confirm) {
							this.vehicleList.splice(index, 1);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		height: 0;
		background-color: #007AFF;
		position: relative;
		z-index: 100;
	}
	
	/* 主内容区域 */
	.main-content {
		flex: 1;
		padding: 24rpx 20rpx;
	}
	
	/* 空状态样式 */
	.empty-state {
		background-color: white;
		border-radius: 24rpx 24rpx 0 0;
		padding: 120rpx 60rpx;
		text-align: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.empty-illustration {
		position: relative;
		width: 400rpx;
		height: 300rpx;
		margin: 0 auto 60rpx;
	}
	
	/* 汽车插图 */
	.car-illustration {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 120rpx;
		z-index: 3;
	}
	
	.car-body {
		width: 180rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #87CEEB, #4682B4);
		border-radius: 20rpx 20rpx 8rpx 8rpx;
		position: relative;
	}
	
	.car-window {
		width: 120rpx;
		height: 40rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 8rpx;
		position: absolute;
		top: 12rpx;
		left: 30rpx;
	}
	
	.car-wheel {
		width: 24rpx;
		height: 24rpx;
		background-color: #333;
		border-radius: 50%;
		position: absolute;
		bottom: -8rpx;
	}
	
	.wheel-left {
		left: 20rpx;
	}
	
	.wheel-right {
		right: 20rpx;
	}
	
	/* 城市背景 */
	.city-background {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 1;
	}
	
	.building {
		position: absolute;
		bottom: 0;
		background-color: rgba(200, 200, 200, 0.3);
		border-radius: 4rpx 4rpx 0 0;
	}
	
	.building-1 {
		width: 40rpx;
		height: 60rpx;
		left: 50rpx;
	}
	
	.building-2 {
		width: 50rpx;
		height: 80rpx;
		left: 120rpx;
	}
	
	.building-3 {
		width: 35rpx;
		height: 45rpx;
		right: 60rpx;
	}
	
	/* 自然元素 */
	.nature-elements {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	
	.leaf {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background-color: rgba(144, 238, 144, 0.4);
		border-radius: 50% 0;
	}
	
	.leaf-1 {
		top: 40rpx;
		left: 80rpx;
	}
	
	.leaf-2 {
		top: 80rpx;
		right: 100rpx;
	}
	
	.leaf-3 {
		bottom: 60rpx;
		left: 150rpx;
	}
	
	.empty-text {
		color: #666;
		font-size: 32rpx;
	}
	
	/* 车辆列表样式 */
	.vehicle-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.vehicle-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 8rpx;
	}
	
	.vehicle-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.vehicle-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #f0f0f0;
		position: relative;
		flex-shrink: 0;
	}
	
	.car-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: block;
	}
	
	.vehicle-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}
	
	.vehicle-model {
		font-size: 30rpx;
		color: #1a1a1a;
		font-weight: 600;
		line-height: 1.4;
	}
	
	.vehicle-plate {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}
	
	.vehicle-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 16rpx;
		border-top: 1rpx solid #f5f5f5;
	}
	
	.default-setting {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.checkbox {
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
		transition: all 0.3s ease;
	}
	
	.checkbox.checked {
		background-color: #ff4444;
		border-color: #ff4444;
	}
	
	.checkmark {
		color: white;
		font-size: 18rpx;
		font-weight: bold;
	}
	
	.default-text {
		font-size: 26rpx;
		color: #333;
	}
	
	.delete-btn {
		font-size: 26rpx;
		color: #999;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		transition: all 0.3s ease;
	}
	
	.delete-btn:active {
		background-color: #f5f5f5;
		color: #666;
	}
	
	/* 底部添加按钮 */
	.add-button {
		height: 88rpx;
		background-color: #007AFF;
		margin: 20rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.25);
	}
	
	.add-icon {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.add-text {
		color: white;
		font-size: 30rpx;
		font-weight: 500;
	}
</style>
